<template>
	<view>
		<view class="main" v-for="(item,indexs) in testArray">
			<view class="mian-title">
				条件{{indexs+1}}
			</view>
			<view class="content">
				<view class="content-top flex">
					<image :src="imgurl+'jianshao.png'" @tap="delInput(indexs)"></image>
					<view class="right flex">
						<picker @change="Change" :value="index" :range="array">
							<view class="right-value">{{array[index]}}</view>
						</picker>
						<image :src="imgurl+'youjiantou.png'"></image>
					</view>
				</view>
				<view class="content-bottom flex">
					<view class="right flex">
						<picker @change="Change" :value="index" :range="array">
							<view class="right-value">{{array[index]}}</view>
						</picker>
						<image :src="imgurl+'youjiantou.png'"></image>
					</view>
				</view>
				<view class="content-footer" v-if="false">
					<view class="right" v-if="false">
						<picker @change="Change" :value="index" :range="array">
							<view class="right-value">{{array[index]}}</view>
						</picker>
					</view>
					<!-- <view class="right" v-else>
						<input placeholder="请输入"/>
					</view> -->
					<view class="right flex" v-else>
						<input placeholder="请输入" />
						<text>至</text>
						<input placeholder="请输入" />
					</view>
				</view>
			</view>
		</view>
		<view class="add" @tap="addInput">
			<view class="mian-title">
				添加条件
			</view>
			<view class="content flex">
				<image :src="imgurl+'tianjia.png'"></image>
				<view class="right flex">
					添加条件
				</view>
			</view>
		</view>
		<button class="buttoncss">保存</button>
	</view>
</template>

<script>
	import app from "../../../App.vue"
	export default {
		data() {
			return {
				imgurl: "",
				array: ['省份', '城市', '来源', '来源详情', '提交答卷日期', '填写所用时间', 'IP地址', '填写序号', '用户名', '常用备注'],
				index: 0,
				testArray: [0], //默认显示一个
				inputVal: [], //所有input的内容
			};
		},
		methods: {
			Change(e) {
				let that = this
				this.index = e.target.value
			},
			//添加选项
			addInput() {
				console.log(this.testArray)
				this.testArray.push(1)
				if (this.testArray.length > 2) {
					this.testArray = [0, 1]
					uni.showModal({
						content: '最多只能使用2个查询条件，企业版有效期用户支持4个查询条件',
						showCancel: false,
						confirmText: '知道了',
						confirmColor: '#00A0E9',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			//删除选项
			delInput(e) {
				var nowidx = e; //当前索引
				// var oldInputVal = this.inputVal; //所有的input值
				var oldarr = this.testArray; //循环内容
				oldarr.splice(nowidx, 1); //删除当前索引的内容，这样就能删除view了
				// oldInputVal.splice(nowidx, 1); //view删除了对应的input值也要删掉
				if (oldarr.length < 1) {
					oldarr = [0] //如果循环内容长度为0即删完了，必须要留一个默认的。这里oldarr只要是数组并且长度为1，里面的值随便是什么
				}
				this.testArray = oldarr
				// this.inputVal = oldInputVal
			},
		},
		onLoad() {
			this.imgurl = app.globalData.imgurls
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
	}

	.main {
		background: #fff;

		.mian-title {
			height: 40rpx;
			width: 100%;
			padding-left: 20rpx;
			background: #F0F0F0;
			font-size: 24rpx;
			color: #999;
			line-height: 40rpx;

		}
	}

	.content {
		.content-top {
			justify-content: space-between;
			padding: 0 20rpx;
			height: 100rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			.right {
				width: 90%;
				justify-content: space-between;
				height: 100rpx;
				border-bottom: 1rpx solid #DFDFDF;
			}
		}

		.content-bottom,
		.content-footer {
			justify-content: space-between;
			height: 100rpx;

			.right {
				width: 85%;
				justify-content: space-between;
				height: 100rpx;
				margin-left: 12%;
				border-bottom: 1rpx solid #DFDFDF;

				text {
					width: 10%;
					height: 100rpx;
					line-height: 100rpx;
				}

				input {
					line-height: 100rpx !important;
					height: 100rpx !important;
				}
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.add {
		background: #fff;

		.mian-title {
			height: 40rpx;
			width: 100%;
			padding-left: 20rpx;
			background: #F0F0F0;
			font-size: 24rpx;
			color: #999;
			line-height: 40rpx;

		}

		.content {
			height: 100rpx;
			padding-left: 20rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.buttoncss {
		width: 690rpx;
		margin: 50rpx auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		background: #00A0E9;
		border-radius: 50rpx;
	}
</style>
